<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@include file="checklogin.jsp"%>
<html>
<head>
    <base href="<%=basePath%>">

    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <link rel="stylesheet" type="text/css" href="layui/dist/css/layui.css">
    <script type="application/javascript" src="js/jq.js"></script>
    <script type="application/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/simpleCart.min.js"> </script>
    <script type="application/javascript" src="layui/dist/layui.all.js"></script>
    <script src="js/orderr.js" type="text/javascript" charset="UTF-8"></script>
    <style>
        .layui-container ul{
            display: none;
        }

        div[type=dialog]{
            border-radius: 10px ;
            background: rgba(255, 255, 255, 0.7);
        }
    </style>
</head>

<body>
<!-- header -->
<!-- header -->
<div class="head-top"></div>

<!-- 导航栏-->

<%@include file="header.jsp"%>
<br>
<br>
<div class="layui-container">

    <div class="layui-row">
        <div name="left"  class="layui-col-md6" style="padding: 10px;border-right:5px solid #5B892F;">
            <h2>我抢的订单</h2>
            <br>
            <br>
            <div style="display: none">
            <div name="leftshoworder"  class="panel panel-default" >
                <div class="panel-heading" style="height: 55px;font-size:25px" >
                    <span name="orderremark" style="color: #1A1A1A;font-size:10px;overflow:hidden;width: 300px"></span>
                    <button name="orderbtn" type="button" class="btn btn-success" style="float: right;background-color: #5A9522">送达</button>
                </div>

                <!-- List group -->
                <ul class="list-group">

                </ul>
            </div>

            </div>
        </div>

        <div name="right" class="layui-col-md6" style="padding: 10px;border-left:thick #5B892F;">
            <h2>我下的订单</h2>
            <br>
            <br>
            <div style="display: none">
                <div name="rightshoworder"  class="panel panel-default" >
                    <div class="panel-heading" style="height: 55px;font-size:25px" >
                        <span name="orderremark" style="color: #1A1A1A;font-size:20px;overflow:hidden;width: 300px"></span>
                        <button name="orderbtn" type="button" class="btn btn-success" style="float: right;background-color:  #C15162">撤销</button>
                    </div>

                    <!-- List group -->
                    <ul class="list-group">

                    </ul>
                </div>
            </div>
        </div>
    </div>


</div>

<br>
<br>


<%@include file="footer.jsp"%>
<%@include file="modal.jsp"%>
<!-- 模态框-->
</body>



<script>

    var layer,form,element  ;
    //初始化layer对象
    layer=layui.layer;
    form=layui.form;
    element = layui.element;
    //传入字符串形式的项目名前缀用来正确地初始化购物车模块
    begin('<%=path%>');

    //通过事件托管的形式给所有的订单div设置点击事件让其点击的时候滑动隐藏和滑动显示
    $("div[class=layui-row]>div").on("click","div",function (event) {
        //让订单div找到相对应的ul直接停止之前的动画队列再让其滑动隐藏或者显示
    $(this).find("ul").stop().slideToggle();
    })

    //初始化我抢到的订单
    $.ajax({
        type: "GET",
        url: '<%=path%>/showmygetorders',
        dataType:'json',
        success: function (result) {
            var show = $("div[name=leftshoworder]")
            //复制左边我抢到的订单的div模板用于下面数据填充
            for(var i=0;i<result.data.length;i++){
                var order=show.clone();
                //克隆模板要不然数据填充来填充去都是同一个对象
                order.find("button").attr("orderid",result.data[i].order_id);
                //找到模板中的按钮赋值orderid属性
                if (result.data[i].end_time!=undefined){
                    //判断end_time是否存在如果存在就是已经送达的订单
                    //不存在就是还没送达的订单
                    //如果判定为存在就将后面的按钮设置为不可选中并且将内容改成已送达
                    order.find("button").attr("disabled", true)
                    order.find("button").text("已送达")
                }
                //找到模板中的用来展示信息的span标签填充进去客户名字，客户地址，客户电话
                order.find("span[name=orderremark]").text("客户名字:"+result.data[i].user_name+' 客户地址:'+result.data[i].room_number+' 客户电话:'+result.data[i].telephone)
                //再遍历每个订单中的菜品信息
                for (var j=0;j<result.data[i].menuorderrInfos.length;j++){
                    //创建已经填充好数据的li标签
                    var li=$(`<li class='list-group-item'>${result.data[i].menuorderrInfos[j].shop_name}:${result.data[i].menuorderrInfos[j].dish_name}<span class="badge">${result.data[i].menuorderrInfos[j].num}件</span></li>`);
                    //创建好一个就插入其中的ul
                    li.appendTo(order.find("ul"))

                }
                //创建备注li标签插入模板中的ul
                $(`<li class='list-group-item'><strong>备注:</strong>${result.data[i].remark}</li>`).appendTo(order.find("ul"))
                //再将渲染好数据的模板插入左边的大div中
                order.appendTo($("div[name=left]"))


            }

        },
        error: function(data) {
        }
    });


    $("div[name=left]").on("click","button", function (event) {
        //点击
        event.stopPropagation();
        $(this).parent().parent().find("ul").hide();
        //复制现在的this对象以便后来的回调函数里能正确地使用
        var  _this = $(this);
        //开启layer确认弹框,填充确定订单送达了么提示内容
        layer.confirm('<b>确定订单送达了么？</b>', {
            btn: ['确认', '取消']
            //出现两个按钮确认和取消

        },
            //点击了确认后运行的函数直接弹出提示框送达成功
            function(){
                layer.msg("<b>订单送达成功</b>",{
                icon:1,
                time: 2000
               },
                    //提示框的回调函数发出添加订单的送达时间也就是标志着订单已经完成
                function () {
                    $.ajax({
                        type: "GET",
                        url: `<%=path%>/addorderendtime`,
                        data:{order_id:_this.attr("orderid")},
                        dataType:'json',
                        success: function (result) {

                            _this.attr("disabled", true)
                            _this.text("已送达")
                        },
                        error: function(data) {
                        }
                    });
            })

        },
            //点击取消按钮后的回调函数
            function(){
            //弹出弹框提醒用户再接再厉
            layer.msg("<b style='color: #a94442'>再接再厉</b>",{
                icon:2,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            })
        });

        })


    //初始化自己下的订单的ajax
    $.ajax({
        type: "GET",
        url: '<%=path%>/showmybuyorders',
        dataType:'json',
        success: function (result) {
            //复制右边的div的订单模板用来填充数据
            var show = $("div[name=rightshoworder]")
            for(var i=0;i<result.data.length;i++){
                var order=show.clone();
                //克隆订单模板
                order.find("span[name=orderremark]").text("正放在前排等待接单")
                //找到模板中展示数据的span标签，默认线填充正放在前排等待接单的内容信息
                order.find("button").attr("orderid",result.data[i].order_id);
                //寻找订单模板中的按钮将订单id赋值到按钮上以便后来实现撤回功能
                if (result.data[i].user_name!=undefined){
                    //判断送餐人的名字是否存在如果存在就执行以下代码
                    order.find("span[name=orderremark]").text("跑腿小哥名字"+result.data[i].user_name+'跑腿小哥电话:'+result.data[i].telephone)
                    //填充跑腿小哥的姓名电话
                    order.find("button").remove()
                    //再将撤销按钮移除
                }

                //跟之前一样遍历每个订单中的菜品将一个一个创建li标签再插入对应的ul中
                for (var j=0;j<result.data[i].menuorderrInfos.length;j++){
                    var li=$(`<li class='list-group-item'>${result.data[i].menuorderrInfos[j].shop_name}:${result.data[i].menuorderrInfos[j].dish_name}<span class="badge">${result.data[i].menuorderrInfos[j].num}件</span></li>`);
                    li.appendTo(order.find("ul"))
                    //将创建好的li标签插入对应的ul
                }
                //创建li标签并填充评论再插入右边的div中
                $(`<li class='list-group-item'><strong>备注:</strong>${result.data[i].remark}</li>`).appendTo(order.find("ul"))
                order.appendTo($("div[name=right]"))


            }

        },
        error: function(data) {
        }
    });
    //因为重复东西太多了这里就不过多解释了就解释不一样的内容如果要参考请翻阅161行到203的注释
    $("div[name=right]").on("click","button", function (event) {
        event.stopPropagation();
        $(this).parent().parent().find("ul").hide();
        var  _this = $(this);
        layer.confirm('<b>确定要取消订单么？</b>', {
            btn: ['确认', '取消'] //可以无限个按钮

        }, function(index){
                //发送删除订单信息的ajax请求
                $.ajax({
                    type: "GET",
                    url: `<%=path%>/deleteorder`,
                    data:{order_id:_this.attr("orderid")},
                    dataType:'json',
                    success: function (result) {
                        //删除成功后弹出信息
                        layer.msg("<b>订单取消成功</b>",{
                            icon:1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        })
                                            //因为不时ul所以不能滑动消失直接hide消失后将自身移除
                        _this.parent().parent().hide(2000,function () {
                            _this.parent().parent().remove()
                        })
                    },
                    error: function(data) {
                    }
                });


        }, function(index){
            //失败后提示信息
            layer.msg("<b style='color: #a94442'>再等等吧</b>",{
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            })
        });

    })
    //点击购物车图片触发点击事件
    $("#buy").on("click",function () {
        //运行ordermenu初始化购物车函数
        ordermenu('<%=path%>')
        //给id=buybtn 的按钮触发点击事件开启模态框
        $("#buybtn").click();

    })

</script>


</html>
